import React from 'react';
import { Card } from '../Card';
import './HistoryStats.css';

export const HistoryStats = ({ stats }) => {
  const { totalVisits, uniqueDomains, timeSpentByDomain } = stats;
  
  const totalMinutes = Object.values(timeSpentByDomain).reduce(
    (sum, data) => sum + data.estimatedMinutes, 
    0
  );
  const totalHours = (totalMinutes / 60).toFixed(1);

  return (
    <div className="history-stats">
      <Card className="stat-card">
        <div className="stat-icon">📊</div>
        <div className="stat-content">
          <div className="stat-value">{totalVisits.toLocaleString()}</div>
          <div className="stat-label">Total Visits</div>
        </div>
      </Card>
      
      <Card className="stat-card">
        <div className="stat-icon">🌐</div>
        <div className="stat-content">
          <div className="stat-value">{uniqueDomains}</div>
          <div className="stat-label">Unique Domains</div>
        </div>
      </Card>
      
      <Card className="stat-card">
        <div className="stat-icon">⏰</div>
        <div className="stat-content">
          <div className="stat-value">{totalHours}h</div>
          <div className="stat-label">Estimated Time</div>
        </div>
      </Card>
      
      <Card className="stat-card">
        <div className="stat-icon">📈</div>
        <div className="stat-content">
          <div className="stat-value">
            {uniqueDomains > 0 ? (totalVisits / uniqueDomains).toFixed(1) : 0}
          </div>
          <div className="stat-label">Avg Visits/Domain</div>
        </div>
      </Card>
    </div>
  );
};

